<template>
  <div class="container-main">
    <div class="bread" style="height: 50px;background: 	#77DDFF">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="font-weight: bold;">公司后端</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">岗位管理</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">岗位列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          label="岗位名称"
          prop="title"
          width="120">
      </el-table-column>
      <el-table-column
          label="工资范围"
          prop="salary"
          width="120">
      </el-table-column>
      <el-table-column
          label="城市"
          prop="city"
          width="120">
      </el-table-column>
      <el-table-column
          label="学历要求"
          prop="degree"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="管理"
          width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="openUpDate(scope.row)">修改</el-button>
          <el-button size="small" type="text" @click="openDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="岗位要求"
          prop="requests"
          width=680>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPages"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="height: 83px"
    >
    </el-pagination>
    <el-dialog
        :visible.sync="DeleteDialogVisible"
        title="删除成功"
        width="30%"
    >
      <span>岗位已删除</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="DeleteDialogVisible=false">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        :visible.sync="UpdateDialogVisible"
        style="margin-top: -100px;height: 800px"
        width="80%"
    >
      <div class="main" style="height: 600px">
        <div class="form-grid-container">
          <span class="register-title" style="margin-top: -30px">职位修改</span>
          <el-form label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位名称">
                  <el-input v-model="form.title" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位类别">
                  <el-input v-model="form.category" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工作城市">
                  <el-input v-model="form.city" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="薪资待遇">
                  <el-input v-model="form.salary" style="width: 300px;" @input="checkSalary"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="学历要求">
                  <el-input v-model="form.degree" style="width: 300px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="岗位职责">
              <el-input v-model="form.duties" style="width: 500px;" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="岗位要求">
              <el-input v-model="form.requests" style="width: 500px;" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="优先条件">
              <el-input v-model="form.priorities" style="width: 500px;" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="form.startTime" style="width: 300px;" type="date"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.endTime" style="width: 300px;" type="date"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="UpdateJob">修改</el-button>
              <el-button @click="UpdateDialogVisible=false">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>

  </div>
</template>


<script>
import axios from "axios";
import AnnounceJobs from "@/components/company/announceJobs.vue";

export default {
  components: {AnnounceJobs},
  data() {
    return {
      DeleteDialogVisible: false,
      UpdateDialogVisible: false,
      tableData: [],
      form: {
        id: '',
        companyId: '',
        categoryId: '',
        city: '',
        salary: '',
        degree: '',
        title: '',
        duties: '',
        requests: '',
        priorities: '',
        startTime: '',
        endTime: ''
      },
      currentPage: 1,
      pageSize: 8,
      totalPages: 1,
    }
  },
  methods: {
    openUpDate(row) {
      axios.get(`/api/category/name/${row.categoryId}`).then(resp => {
        this.form.category = resp.data;
        this.UpdateDialogVisible = true;
      })
      this.form.categoryId = row.categoryId;
      this.form.id = row.id;
      this.form.companyId = row.companyId;
      this.form.title = row.title;
      this.form.city = row.city;
      this.form.salary = row.salaryL + 'k' + '-' + row.salaryR + 'k'; // 拼接
      this.form.salaryL = row.salaryL
      this.form.salaryR = row.salaryR
      this.form.degree = row.degree;
      this.form.duties = row.duties;
      this.form.requests = row.requests;
      this.form.priorities = row.priorities;
      this.form.startTime = row.startTime;
      this.form.endTime = row.endTime;
    },
    UpdateJob() {
      axios.post('/api/jobs/update', this.form)
          .then(response => {
            console.log(this.form)
            if (response.status === 200) {
              this.UpdateDialogVisible = false;
              this.$message({
                message: '岗位信息修改成功！',
                type: 'success'
              });
              this.fetchTableData();
            } else {
              this.$message({
                message: '岗位信息修改失败，请稍后再试',
                type: 'error'
              });
            }
          })
          .catch(error => {
            console.log(error);
            this.$message({
              message: '修改岗位信息时出现错误，请检查网络或联系管理员',
              type: 'error'
            });
          });
    },


    fetchTableData() {
      axios.get(`/api/jobs/find/${this.$store.state.companyId}`).then(resp => {
        const allData = resp.data;
        this.totalPages = Math.ceil(allData.length);
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.tableData = allData.slice(startIndex, endIndex).map(item => {
          return {
            ...item,
            salary: `${item.salaryL}k - ${item.salaryR}k`
          };
        });
      })
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchTableData();
    },
    handleClick(row) {
      axios.get(`/api/company/${row.id}/1`).then(resp => {
        this.fetchTableData();
      }).catch(err => {
        this.fetchTableData();
      })

    },
    openDelete(row) {
      this.$confirm('确定要删除该岗位?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        axios.get(`/api/jobs/delete/${row.id}`).then(resp => {
          this.DeleteDialogVisible = true;
          this.fetchTableData();
        })
      }).catch((err) => {
        console.log(err);
      });
    },
  },
  mounted() {
    this.fetchTableData();
  }
}

</script>
<style>
.bread {
  height: 50px;
  display: flex;
  align-items: center;
}

.container-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.el-table {
  flex: 1;
  width: 100%;
}
</style>
